<template>
  <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body custom-class="import-dialog"
             @close="close"
  >
    <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="add-form">
      <div class="section">
        <div class="label">
          <label>入住信息</label>
        </div>
        <el-form-item label="房间">
          {{ data.premisesAddress }}
        </el-form-item>
        <el-form-item label="入住方式">
          <el-radio-group v-model="form.lesseeType" @change="lesseeTypeChange">
            <el-radio label="1">承租人</el-radio>
            <el-radio label="2">企业</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.lesseeType == 1">
          <el-form-item label="姓名" prop="lesseeName" key="lesseeName">
            <el-input v-model="form.lesseeName" style="width: 240px"/>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" key="phone">
            <el-input v-model="form.phone" maxlength="11" v-input.int style="width: 240px"/>
          </el-form-item>
          <el-form-item label="身份证号" prop="cardNumber" key="cardNumber">
            <el-input v-model="form.cardNumber" style="width: 240px"/>
          </el-form-item>
        </div>
        <div v-if="form.lesseeType == 2">
          <el-form-item label="企业名称" prop="enterpriseName" key="enterpriseName">
            <el-input v-model="form.enterpriseName" style="width: 240px"/>
          </el-form-item>
          <el-form-item label="社会信用代码" prop="socialCreditCode" key="socialCreditCode">
            <el-input v-model="form.socialCreditCode" style="width: 240px"/>
          </el-form-item>
          <el-form-item label="企业联系人" prop="lesseeName" key="lesseeName">
            <el-input v-model="form.lesseeName" style="width: 240px"/>
          </el-form-item>
          <el-form-item label="联系人手机号" prop="phone" key="phone">
            <el-input v-model="form.phone" maxlength="11" v-input.int style="width: 240px"/>
          </el-form-item>
        </div>
      </div>

      <div class="section" v-if="form.lesseeType == 2">
        <div class="label">
          <label>房管员信息</label>
        </div>
        <!--TODO:房管员信息-->
<!--        <el-form-item label="创建房管员(开发中，忽略)" prop="isCreateHouseManager">-->
<!--          <el-switch v-model="form.isCreateHouseManager" active-value="1" inactive-value="2"></el-switch>-->
<!--        </el-form-item>-->
        <el-form-item label="姓名" prop="houseManagerName">
          <el-input v-model="form.houseManagerName" style="width: 240px"/>
        </el-form-item>
        <el-form-item label="手机号" prop="houseManagerPhone">
          <el-input v-model="form.houseManagerPhone" maxlength="11" v-input.int style="width: 240px"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="cardNumber">
          <el-input v-model="form.cardNumber" style="width: 240px"/>
        </el-form-item>
        <el-form-item label="是否入住" prop="residenceStatus">
          <el-radio-group v-model="form.residenceStatus">
            <el-radio label="1">入住</el-radio>
            <el-radio label="2">不入住</el-radio>
          </el-radio-group>
        </el-form-item>

      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { debounce } from '@/utils'
import { addOrderLessee, getOrderInfo } from '@/api/order/order'

export default {
  name: 'check-in',
  props: {
    value: {
      default: false
    },
    title: {
      default: '入住信息'
    },
    data: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      form: {
        lesseeType: '1',//承租人类型：1个人 2企业
        lesseeName: '',//承租人姓名
        cardNumber: '',//身份证号
        enterpriseName: '',//企业名称
        phone: '',//承租人手机号
        socialCreditCode: '',//企业统一信用代码
        orderId: '',//订单id
        houseManagerName: '',//房管员名字
        houseManagerPhone: '', //房管员电话
        residenceStatus: '1', //入住状态:1.入住;2.不入住
        isCreateHouseManager: '2' //是否创建房管员：1.创建;2.不创建
      },
      rules: {
        lesseeName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        cardNumber: [
          { required: true, message: '请输入身份证', trigger: 'blur' },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入正确的身份证号',
            trigger: 'blur'
          }
        ],
        enterpriseName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        socialCreditCode: [
          { required: false, message: '请输入社会信用代码', trigger: 'blur' }
        ],
        // orderId: [
        //   { required: true, message: '请输入订单号', trigger: 'blur' }
        // ],
        houseManagerName: [
          { required: true, message: '请输入房管员姓名', trigger: 'blur' }
        ],
        houseManagerPhone: [
          { required: true, message: '请输入房管员手机号', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
        // residenceStatus: [
        //   { required: true, message: '请选择是否入住', trigger: 'blur' }
        // ]
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      this.reset()
      this.getOrderInfo()
    },
    reset() {
      this.form = {
        lesseeType: '1',//承租人类型：1个人 2企业
        lesseeName: '',//承租人姓名
        cardNumber: '',//身份证号
        enterpriseName: '',//企业名称
        phone: '',//承租人手机号
        socialCreditCode: '',//企业统一信用代码
        orderId: this.data.orderId,//订单id
        houseManagerName: '',//房管员名字
        houseManagerPhone: '', //房管员电话
        residenceStatus: '1' //入住状态:1.入住;2.不入住
      }
      this.resetForm('form')


    },
    //承租人类型切换
    lesseeTypeChange(val) {
      if (val) {
        this.getOrderInfo()
      }
    },
    getOrderInfo() {
      getOrderInfo(this.data.orderId).then(response => {
        let lesseeContract = response.data.lesseeContract
        if (lesseeContract) {
          if (this.form.lesseeType == 1) {
            //个人
            this.form.lesseeName = lesseeContract.contactName
            this.form.phone = lesseeContract.contactPhone
            this.form.cardNumber = lesseeContract.cardNumber
            this.form.enterpriseName = ''
            this.form.socialCreditCode = ''
          }
          if (this.form.lesseeType == 2) {
            //企业
            this.form.enterpriseName = lesseeContract.enterpriseName
            this.form.socialCreditCode = lesseeContract.socialCreditCode
            this.form.lesseeName = lesseeContract.contactName
            this.form.phone = lesseeContract.contactPhone
            this.form.cardNumber = ''
          }

        }else{
          this.form.lesseeName = this.data.reserveUser
          this.form.phone = this.data.reserveUserPhone
        }
      }).catch(error => {
        console.log(error)
      })
    },
    submitForm: debounce(function() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addOrderLessee(this.form).then(response => {
            this.$message.success(response.msg)
            this.$emit('success')
            this.close()
          }).catch(error => {
            this.$message.error(error.msg || '出错了，请稍后再试')
          })
        } else {
          return false
        }
      })
    }, 300,false),
    //关闭
    close() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/dialog.scss";
.section {
  .label {
    display: flex;
    margin-bottom: 20px;
    font-size: 16px;
    align-items: center;
    color: #303133;

    label {
      display: block;
      width: 80px;

      &.dot::before {
        content: "*";
        color: #ff4949;
        margin-right: 4px;
      }
    }

  }
}
</style>
